<template>
  <div class="shijuanlist">
    <a-tabs v-model:activeKey="activeKey" centered size="large">
      <!-- <a-tab-pane key="1">
        <template #tab>
          <div class="vertical-tab">
            <EditTwoTone :style="{ fontSize: '28px' }" />
            <span>每日一练</span>
          </div>
        </template>
      </a-tab-pane> -->
      <a-tab-pane key="2">
        <template #tab>
          <div class="vertical-tab" @click="handleToNews">
            <NotificationTwoTone :style="{ fontSize: '20px' }" />
            <span>最新时政</span>
          </div>
        </template>
      </a-tab-pane>
      <a-tab-pane key="3">
        <template #tab>
          <div class="vertical-tab" @click="handleToDownload">
            <ContainerTwoTone :style="{ fontSize: '20px' }" />
            <span>历年试卷</span>
          </div>
        </template>
      </a-tab-pane>
      <a-tab-pane key="4">
        <template #tab>
          <div class="vertical-tab" @click="handleToShare">
            <MailTwoTone :style="{ fontSize: '20px' }" />
            <span>经验分享</span>
          </div>
        </template>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts" setup>
import {
  EditTwoTone,
  NotificationTwoTone,
  ContainerTwoTone,
  MailTwoTone,
} from '@ant-design/icons-vue'
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const activeKey = ref('1')
const router = useRouter()
const route = useRoute()

function handleToNews() {
  router.push({
    path: '/news',
  })
}
function handleToDownload() {
  router.push({
    path: '/download',
  })
}
function handleToShare() {
  router.push({
    path: '/share',
  })
}
</script>

<style scoped>
.shijuanlist {
  width: 100%;
  margin-top: 50px;
}
.vertical-tab {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: 4px; /* 控制图标和文字的间距 */
}

/* 移除所有 Tab 的下划线 */
:deep(.ant-tabs-ink-bar) {
  display: none !important;
}

/* 可选：移除激活态底部边框 */
:deep(.ant-tabs-tab-active) {
  border-bottom: none !important;
}

:deep(.ant-tabs-nav-wrap) {
  display: flex !important;
}
</style>
